<template>
    <div id="contener">
        <p class="title" >手机快捷登录</p>
        <div class="phone-box">
            <input 
                v-model="phone"
                type="number"
                class="phoneNumber"
                :placeholder="phoneholder"
                @input="inputPhoneHandle"
                :maxlength="maxlength"/>
            <p :class='{"btn-code":true,"clickable":clickable}' @click="getCode" v-show="btnType=='code'">获取验证码</p>
            <p :class='{"btn-code":true}' v-show="btnType!='code'">{{seconds+'s'}}</p>
        </div>
        <input 
            v-model="code"
            type="number"
            class="codeNumber"
            :placeholder="codeholder"/>
        <p :class="{'login-btn':true,'loginable':clickable && code}" @click="login">登录</p>
    </div>
</template>

<script>
import { isTel } from "../assets/utils/util"
import api from "../assets/models/api";
let oApi = new api();
export default {
    data(){
        return {
            phone:'',
            code:'',
            phoneholder: '请输入手机号',
            codeholder: '请输入验证码',
            maxlength: 11,
            clickable: false,
            btnType: 'code',
            seconds: 60
        }
    },
    methods:{
        // 监听用户输入手机号
        inputPhoneHandle(e){
            let value = e.target.value;
            this.phone = value.trim().substring(0, 11);
            this.clickable = isTel(this.phone);
        },
        // 点击获取验证码
        getCode(){
            if(!this.clickable) return false;
            oApi.getCode(this.phone,()=>{
                this.toast = this.$createToast({
                    txt: '验证码已发送',
                    type: 'txt'
                })
                this.toast.show()
                this.updateCount()
            },err=>{
                this.toast = this.$createToast({
                    txt: err.message,
                    type: 'txt'
                })
                this.toast.show()
            });
        },
        // 倒计时
        updateCount(){
            this.btnType = 'seconds';
            let interval = setInterval(()=>{
                this.seconds--;
                if(this.seconds<1){
                    clearInterval(interval);
                    this.btnType = 'code';
                    this.seconds = 60;
                }
            },1000);
        },
        // 点击登录
        login(){
            if(!(this.clickable && this.code)) return false;
            oApi.login({
                mobile: this.phone,
	            code: this.code
            },()=>{
                this.toast = this.$createToast({
                    txt: '登录成功',
                    type: 'txt'
                })
                this.toast.show()
            },err=>{
                this.toast = this.$createToast({
                    txt: err.message,
                    type: 'txt'
                })
                this.toast.show()
            });
        }
    }
}
</script>

<style lang="stylus" scoped>
    #contener
        width 100vw
        box-sizing border-box
        padding 0 20px
        .title
            color #333
            font-size 28px
            font-weight 500
            margin-top 45px
        .phone-box
            position relative
            margin-top 40px
            .btn-code
                position absolute
                z-index 999
                right 0px
                top 0px
                font-size 16px
                color #AAAAAA
                line-height 60px
                background #fff
            .clickable
                color #5AADFF    
    .phoneNumber,
    .codeNumber
        padding 20px 0
        font-size 18px
        outline none 
        border-bottom 1px solid #F3F3F3
        width 100%
        color #464858
        &::-webkit-input-placeholder
            color #D3D7E2
        &::-moz-input-placeholder
            color #D3D7E2
        &::-ms-input-placeholder
            color #D3D7E2
    .codeNumber
        margin-top 0px
    .login-btn
        width 230px
        height 50px
        background rgba(255,230,135,1)
        box-shadow 0px 2px 6px 0px rgba(255,230,135,0.53)
        border-radius 24px
        color #B29D67
        text-align center
        line-height 48px
        margin 70px auto
        font-size 18px
    .loginable
        background:rgba(255,218,68,1);
        box-shadow:0px 2px 6px 0px rgba(255,202,0,0.53);
        color #57430F
</style>